import React from 'react';
import { DatePicker, TimePicker, Form, Row, Col } from 'antd';
import moment from 'moment';

import useDateRange from '@/hooks/useDateRange';

export const handleSecondTime = (time: number) => {
  return moment(time * 1000);
};

const DateRange = () => {
  const begin = moment().subtract(1, 'd').unix();
  const end = moment().unix();

  const {
    startTime,
    endTime,
    setRangeStartTime,
    setRangeEndTime,
    disableBeginDate,
    disableEndDate,
    disableBeginHours,
    disableEndHours,
  } = useDateRange({ begin, end, defaultStartTime: begin, defaultEndTime: end });

  // 起始时间
  const startTimePickState = {
    value: handleSecondTime(startTime),
    onChange: (date: any) => {
      if (date) setRangeStartTime(date.unix());
    },
  };
  // 终止时间
  const endTimePickState = {
    value: handleSecondTime(endTime),
    onChange: (date: any) => {
      if (date) setRangeEndTime(date.unix());
    },
  };

  return (
    <Row style={{ marginTop: 20 }}>
      <Col span={21}>
        <Form layout="inline">
          <Form.Item label="起">
            <DatePicker {...startTimePickState} disabledDate={disableBeginDate} />
          </Form.Item>
          <Form.Item>
            <TimePicker
              {...startTimePickState}
              hideDisabledOptions
              disabledHours={disableBeginHours}
            />
          </Form.Item>
          <Form.Item label="止">
            <DatePicker {...endTimePickState} disabledDate={disableEndDate} />
          </Form.Item>
          <Form.Item>
            <TimePicker {...endTimePickState} hideDisabledOptions disabledHours={disableEndHours} />
          </Form.Item>
        </Form>
      </Col>
    </Row>
  );
};

export default DateRange;
